<template>
  <div class="myOrder">
    <Back></Back>
    <div class="title  dd-row dd-v-center">
      <div class='shu'>| </div>
      <div class="">我的订单</div>
    </div>
    <!-- <div style='height:40pt;'></div> -->
    <!-- <div v-for="{{myOrderData}}" v-for-item="orderItem"> -->
    <div class="content" v-for="(orderItem,index) in myOrderData" :key="index">
      <div class="dd-column orderItems">
        <div class="head dd-row dd-h-2side">
          <div class='dataTime' v-show="orderItem.timeStamp">{{ orderItem.timeStamp | getDatee }}</div>
          <div class='status' v-show="orderItem.status">{{ orderItem.status | SCodeToStr}}</div>
        </div>
        <!--左边 和 右边 价钱  -->
        <div class="dd-row dd-h-2side dd-v-center orderItem" v-for="(item2,index2) in orderItem.goods" :key="index2">
          <GoodsItem :item2="item2">
          </GoodsItem>
        </div>
        <div class="dd-row dd-h-right">
          <div class="checkTheDetails" @click="checkTheDetails(orderItem)">查看详情</div>
        </div>
      </div>
    </div>
    <div style='height:40pt;'></div>
  </div>
</template>

<script>
import { timeStampToDate, SCodeToStr } from "@/utils/ddUtils.js";
import GoodsItem from "@/components/My/GoodsItem";
import Back from "@/components/Back.vue";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      myOrderData: [
        // {
        //   id: "001220180621",
        //   status: 1,
        //   timeStamp: 1530585692927,
        //   totalMoney: 80,
        //   goods: [
        //     {
        //       id: 155,
        //       intro: "简介：这是好吃的韭菜馅饼，选料考究，入口爽快。",
        //       inventory: "14",
        //       name: "煎饼222222",
        //       num: 4,
        //       pic:
        //         "http://huyaimg.msstatic.com/avatar/1093/f5/9f51df52143c14ba7fab3b01849dd4_180_135.jpg?0?424782",
        //       price: 20
        //     }
        //   ]
        // },

        {
          id: "001220180621" /* 带有机器编码+日期 的id */,
          timeStamp: 21321321312 /* 时间戳 */,
          totalMoney: 156 /* 总计钱数 */,
          status: 1 /* 状态值 */,
          pickUpCode: "123123" /* 取货码 */,
          goods: [
            {
              id: 12, //商品id
              pic:
                "http://huyaimg.msstatic.com/avatar/1093/f5/9f51df52143c14ba7fab3b01849dd4_180_135.jpg?0?424782", //商品图片
              inventory: "12", //商品库存
              name: "煎饼111", //商品名字
              intro: "简介：这是好吃的韭菜馅饼，选料考究，入口爽快。", //商品简介
              price: 10, //商品价格
              num: 0 //商品id
            },
            {
              id: 155,
              pic:
                "http://huyaimg.msstatic.com/avatar/1093/f5/9f51df52143c14ba7fab3b01849dd4_180_135.jpg?0?424782",
              inventory: "14",
              name: "煎饼222222",
              intro: "简介：这是好吃的韭菜馅饼，选料考究，入口爽快。",
              price: 20,
              num: 0
            }
          ],
          goodsTAndList: [
            //  {
            //   title: "总计",
            //   message: 156
            // },
            // {
            //   title: "平台优惠",
            //   message: "无"
            // },
            // {
            //   title: "积分",
            //   message: "+5"
            // },
          ],
          commentStarNum: 4 /*评论的星级*/,
          commentText: "这个真的好吃呀，啦啦啦。" /* 评论内容 */
        }
      ]
    };
  },
  mounted() {
    // console.log("ddUtils.dd=---->", typeof ddUtils.dd.getDate);
    // console.log(timeStampToDate(123123));
  },
  methods: {
    checkTheDetails(_orderItem) {
      //查看详情
      console.log("_orderItem--->", _orderItem);

      this.$router.push("/my/myOrder/myOrderDetails");
    }
  },
  filters: {
    //   时间戳转换函数
    getDatee(_timeStamp) {
      return timeStampToDate(_timeStamp);
    },
    // 状态转换函数
    SCodeToStr(_statu) {
      return SCodeToStr(_statu);
    }
  },
  components: {
    GoodsItem,
    Back
  }
};
</script>
<style scoped>
html {
  background-color: #f1f1f1;
}

.myOrder .title {
  padding: 4pt 0 2pt 0;
  height: 40pt;
  box-sizing: border-box;
  font-size: 12pt;
  font-weight: bold;
  background: #f1f1f1;
}
.myOrder .title .shu {
  color: orange;
  font-weight: bold;
  margin: 0 5pt 0 2pt;
}
/* 查看详情 */
.myOrder .checkTheDetails {
  border-radius: 15pt;
  border: 1pt solid #f1f1f1;
  font-size: 10pt;
  margin-top: 5pt;
  padding: 2pt 4pt;
}

/* 主体 */
.myOrder .content {
  padding: 8pt 10pt;
  box-shadow: 0 0 2pt #444;
  margin: 5pt 3%;
  width: 94%;
  border-radius: 4pt;
}

.myOrder .content .head {
  margin-bottom: 5pt;
}
</style>